<template>
  <div class="container">
    <!-- page main -->
    <div class="top-dl m_block btn_install" @click="handleClick($event, copyContent, playIndex.app_down.app_down_url)">
      <img src="@/assets/img/advertise/xiaokr/icon.png" alt="小氪手游">
    </div>
    <div class="bg_wrapper m_block">
      <img src="@/assets/img/advertise/xiaokr/bg_01.png" alt="小氪手游">
      <img src="@/assets/img/advertise/xiaokr/bg_02.png" alt="小氪手游">
      <img src="@/assets/img/advertise/xiaokr/bg_03.png" alt="小氪手游">
      <div class="bottom_gift_wrapper" @click="handleClick($event, copyContent, playIndex.app_down.app_down_url)">
        <img src="@/assets/img/advertise/xiaokr/bottom_gift.gif" alt="小氪手游">
      </div>
    </div>
    <div class="banner_wrapper">
      <div class="swiper-container ad_xiaokr_swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in bannerList" :key="index">
            <img :src="item" :alt="`小氪手游banner_${index}`">
          </div>
        </div>
      </div>
    </div>
    <div class="red_bag m_block" @click="handleClick($event, copyContent, playIndex.app_down.app_down_url)">
      <img src="@/assets/img/advertise/xiaokr/red-bag.gif" alt="小氪手游">
    </div>
    <div class="fixed_dl" @click="handleClick($event, copyContent, playIndex.app_down.app_down_url)">
      <img src="@/assets/img/advertise/xiaokr/btn_download.gif" alt="小氪手游">
    </div>
    <div class="xk_footer">
      <p>开发者：湖南宝哟网络科技有限公司</p>
      <p>小氪手游 V1.0.0&nbsp;&nbsp;<router-link to="/advertisement/user_permission">用户权限</router-link>&nbsp;&nbsp;<router-link to="/advertisement/private_policy">隐私协议</router-link></p>
      <p>湖南宝哟网络科技有限公司</p>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import "swiper/dist/css/swiper.min.css"
import Clipboard from 'clipboard'
import { buildUUID, getQueryItem, getPlatform } from '@/util'
import { mapGetters } from 'vuex'
export default {
  name: 'ad_xiaokr',
  data() {
    return {
      bannerList: [
        require('@/assets/img/advertise/xiaokr/banner_1.png'),
        require('@/assets/img/advertise/xiaokr/banner_2.png'),
        require('@/assets/img/advertise/xiaokr/banner_3.png'),
        require('@/assets/img/advertise/xiaokr/banner_4.png'),
      ],
      copyContent: '',
      qid: '',
      appId: 0
    }
  },
  computed: {
    ...mapGetters([
      'playIndex'
    ])
  },
  mounted() {
    // 初始化swiper
    new Swiper('.ad_xiaokr_swiper', {
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      autoplay: {
        delay: 2500,
        stopOnLastSlide: false,
        disableOnInteraction: 0,
      },
    });

    /* 生成UUID并存入待复制面板 */
    let uuid = null;
    if (getCookie('UUID')) {
      uuid = getCookie('UUID')
    } else {
      uuid = `clipboard-${new Date().getTime()}-${buildUUID()}`
      this.setCookie('UUID', uuid)
    }

    // 处理剪切板内容
    const clipboardText = JSON.stringify({ tag: 'qifeng', app_id: this.appId, uuid: uuid });
    this.copyContent = window.btoa(clipboardText);
  },
  methods: {
    /**
     * @method handleClick 点击安装app并上报信息，复制内容到剪切板
     * @param {Element} e 当前点击元素对象
     * @param {String} code 剪切板复制内容
     * @param {URL} url app下载地址 
     */
    handleClick(e, code, url) {
      /* 获取页面referrer */

      if (document.referrer && getQueryItem(document.referrer, 'qid')) {
        this.qid = getQueryItem(document.referrer, 'qid')
      } else {
        console.log('当前页面暂无qid！');
      }
      const clipboard = new Clipboard(e.target, { text: () => code });

      clipboard.on('success', e => {
        // 释放内存
        clipboard.destroy();
      })
      clipboard.on('error', e => {
        clipboard.destroy();
      })

      clipboard.onClick(e);

      const qid = !this.qid ? getCookie('ad_click_id') : this.qid;
      // 点击下载app并上报信息
      this.advertiseGameDownload(url, { app_id: this.appId, click_id: qid, uuid: getCookie('UUID') });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #ffffff;
  margin-top: .8rem;
  position: relative;
  font-size: 0;
  overflow: hidden;
  .top-dl {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: .8rem;
  }
  .bg_wrapper {
    font-size: 0;
    .bottom_gift_wrapper {
      position: absolute;
      top: 24.9rem;
      padding: 0 .41rem;
    }
  }
  .banner_wrapper {
    position: absolute;
    top: 20rem;
    left: 0;
    right: 0;
    height: 4.2rem;
    width: 100%;
    overflow: hidden;
  }
  .red_bag {
    position: absolute;
    right: -.14rem;
    top: 25.28rem;
    width: 1.02rem;
    height: 1.24rem;
    z-index: 99;
  }
  .fixed_dl {
    position: fixed;
    bottom: .56rem;
    left: 0;
    width: 100%;
    z-index: 99;
    img {
      display: block;
      width: 2rem;
      margin: 0 auto;
    }
  }
  .m_block {
    img {
      width: 100%;
      height: 100%;
    }
  }
  .ad_xiaokr_swiper {
    .swiper-slide {
      width: 3.2rem;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .xk_footer {
    background: #000000;
    padding: .1rem;
    text-align: center;
    p {
      color: #ffffff;
      font-size: .07rem;
      font-weight: 500;
      a {
        color: orange;
        cursor: pointer;
      }
    }
  }
}
</style>